<template>
  <div>
    <el-dialog
      :title="formData.id?'编辑客户':'添加客户'"
      :visible="showDialog"
      width="50%"
      @close="closeFn"
    >
      <!-- 放置表单 -->
      <el-form ref="form" :rules="rules" label-width="120px" :model="formData">
        <el-form-item label="经纪" prop="agent">
          <!-- <el-dropdown> -->
          <el-select v-model="formData.agent" class="el-select" style="width:120px">
            <el-option label="全部经纪" value="" />
            <el-option
              v-for="item in agentsData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
            <!-- select<i class="el-icon-arrow-down el-icon--right" /> -->
          </el-select>
          <!-- <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>喜洋洋</el-dropdown-item>
              <el-dropdown-item>美羊羊</el-dropdown-item>
            </el-dropdown-menu> -->
          <!-- </el-dropdown> -->
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="formData.wechat" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="封面">
          <!-- <span>封面信息</span> -->
          <!-- 封面 -->
          <el-row class="inline-info">
            <el-col :span="12">
              <el-form-item>
                <!-- 放置上传图片 -->
                <ImageUpload ref="imgupload" :img-show="bool" @closeUpdata="closeUpdata" />

              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmFn">确 定</el-button>
        <el-button size="small" @click="closeFn">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addClient, updateClient, appointClient } from '@/api/client'
import ImageUpload from '@/views/categories/component/ImageUpload.vue'
export default {
  components: { ImageUpload },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    agentsData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      formData: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: '',
        fileList: [],
        value: ''
      },
      bool: false, // 封面是否显示

      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '姓名为2-6位' }
        ],
        // email: [
        //   { required: true, message: '邮箱不能为空', trigger: 'blur' }
        // ],
        phone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
          }
        ],
        wechat: [
          { required: true, message: '微信名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
  },
  methods: {
    // 确认
    async confirmFn() {
    // 表单验证
      this.$refs.form.validate()
      // 经纪对象
      // this.formData.agent = this.agentsData.filter(item => item.name === this.formData.agent)[0]
      console.log(106, '校验通过')

      // 调用新增接口函数
      //   添加判断 有id说明是编辑
      // await updatePersonal(this.formData)
      if (this.formData.id) {
        console.log(113, '编辑测试')
        // 有id就编辑
        await updateClient(this.formData)
        // this.$emit('editEvent', this.formData)
      } else {
        // 没有就新增
        await addClient(this.formData)
        console.log(118)
      }
      //   读取上传组件的数据
      const upload = this.$refs.imgupload
      console.log(114, upload)
      if (upload.percent > 0 && upload.percent < 100) {
        return this.$message.warning('图片正在上传中')
      }
      this.formData.image = upload.fileList[0] && upload.fileList[0].url
      // this.getClientList()
      //   关闭窗口
      this.closeFn()
      //   子传父 --- 通知父组件更新列表
      this.$emit('updateEvent')
    },
    // 关闭窗口
    closeFn() {
      // 清空表单
      this.formData = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: ''
      }
      this.$emit('update:showDialog', false)
      //   this.showDialog = false
      this.$refs.imgupload.fileList = []
      // 重置校验规则
      this.$refs.form.resetFields()
    },

    // 判断图片，并接收数据
    closeUpdata(fileList) {
      this.bool = fileList.length === 1
      this.formData.imgupload = fileList[0] ? fileList[0].url : ''
    },
    // 获取数据
    async getClientItem(id) {
      this.formData = await appointClient(id)
    }
  }

}
</script>

<style lang="scss" scoped>
.el-select{
    color: #666;
    .el-icon--right{
        margin-left: 30px;
    }
}

</style>
